<template>
	<div style="font-size: 13px;" :style="{ color: color}">
		<div v-if="showIcon" class="state-circle-icon" :style="{ background: setTagStateStyle(state).color }" style="display: inline-block; margin-bottom: 2px;"></div>
		<span v-if="showText">{{ setTagStateStyle(state)[labelKey] }}</span>
	</div>
</template>
<script>
    export default {
        props: {
            state: {
                type: [String, Number],
                default: ''
            },
            showText: {
                type: Boolean,
                default: true
            },
            showIcon: {
                type: Boolean,
                default: true
            },
            color: {
                type: String,
                default: '#515a6e'
            },
            labelKey: {
                type: String,
                default: 'name'
            },
            stateList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                isActive: false
            };
        },
        methods: {
            setTagStateStyle(state) {
                const item = this.stateList.find(x => x.id === state) || {};
                return item;
            }
        }
    };
</script>
<style scoped lang="scss">
.state-circle-icon {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 4px;
}
</style>
